<template>
  <div class="headerBox">
    <el-badge is-dot class="item" style="margin-right:30px">消息</el-badge>
    <el-dropdown>
      <span style="display:flex;align-items: center;margin-right:30px">
        <img src="@/assets/image/2.jpeg" alt="" />
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>消息中心</el-dropdown-item>
          <el-dropdown-item @click="$router.push('/login')">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script lang='ts' setup>
import { ArrowDown } from "@element-plus/icons-vue";
</script>

<style scoped lang='scss'>
.headerBox {
  height: 70px;
  width: calc(100vw - 200px);
  background: white;
  display: flex;
  align-items: center;
  justify-content: right;
}

img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

</style>